<template>
    <el-card>
        <div class="title-container">
            <span class="rect"></span>
            <h3 style="margin-bottom: 5px">产业更新档案</h3>
        </div>
        <l-table ref="firmDocumentTable" :isPage="true" @loadPageData="turnTablePage" :loading="tableLoading"
            :columns="firmDocumentTableColmuns" :dataSource="tableData">
            <template #attachment="scope">
                <a v-if="scope.row.attachment" @click="openFile(scope.row.attachment)">查看</a>
                <span v-else>--</span>
            </template>
        </l-table>
        <l-dialog title="文件列表" :width="400" :modal="false" :hasBtns="false" :hasHeight="false" :hasMinBtn="true"
            placement="bottom-right" :visible.sync="loadVisible" class="file-list-dialog">
            <upload-file-list :uploadingFiles="uploadingFiles" :handleFilePreview="handleFilePreview" />
        </l-dialog>
        <l-dialog title="文件预览" :visible.sync="previewVisible" width="1000px" :height="800">
            <div v-if="!isAllowed" class="desc">
                <div class="icon">
                    <svg t="1706076437100" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1947" id="mx_n_1706076437101" width="16" height="16">
                        <path
                            d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 268.190476v292.571428h-73.142858V438.857143h73.142858z m0-121.904762v73.142857h-73.142858v-73.142857h73.142858z"
                            p-id="1948" fill="#ffaa00"></path>
                    </svg>
                </div>
                <div class="tip">该类型文件不支持预览，请点击下方下载按钮下载文件进行预览</div>
            </div>
            <iframe v-else-if="previewUrl != ''" :src="previewUrl" class="l-iframe" ref="iframe" frameborder="0"></iframe>
            <template #btns>
                <el-button size="mini" icon="el-icon-down" type="primary" @click="
                    downFile(`${previewFileId}`)
                    ">下载</el-button>
            </template>
        </l-dialog>
    </el-card>
</template>


<script>
import { firmDocumentTableColmuns, firmDocumentApi } from "./columns"
import UploadFileList from "@/core/components/upload-preview/lrUploadFileList.vue";
export default {
    components: {
        UploadFileList
    },
    data() {
        return {
            tableLoading: true,
            tableData: [],
            tableTotal: 0,
            tableCurrentPage: "1",
            tablePageSize: "50",
            firmDocumentTableColmuns,

            fileExt: "",
            loadVisible: false,
            uploadingFiles: [],
            previewFileId: "",
            previewUrl: "",
            previewVisible: false,
        };
    },
    props: {
        landTableData: {
            type: Object,
            default: () => { }
        }
    },
    computed: {
        isAllowed() {
            return "pdf,png,jpg,jpeg".includes(this.fileExt)
        }
    },
    methods: {
        filterBtns(row, btns) {
            return btns;
        },
        init() {
            this.loadTableData();
        },
        async loadTableData(isNotFirst) {
            if (!isNotFirst) {
                this.tableCurrentPage = 1
            }
            let requestConfig = {
                rows: this.tablePageSize,
                page: this.tableCurrentPage,
                landId: this.landTableData.id
            }
            let data = await this.$awaitWraper(firmDocumentApi.getPage(requestConfig));
            if (data.rows.length !== 0) {
                this.tableData = data.rows;
                this.tableTotal = data.records;
            }
            else {
                this.tableTotal = 0
                this.tableData = []
            }
            this.tableLoading = false;
        },

        async openFile(folderId) {
            this.uploadingFiles = []
            if (folderId) {
                const api = window.$crud(`system/annexesfile/${folderId}/list`);
                const list = await this.$awaitWraper(api.getInfo());
                if (list.length) {
                    this.uploadingFiles = list.map(t => {
                        const point = {
                            ...t
                        };
                        const fileIcon = this.lr_getFileIcon(t.name);

                        point.icon = fileIcon.icon;
                        point.color = fileIcon.color;
                        point.name = point.f_FileName;
                        point.uid = point.f_Id;
                        point.id = point.f_Id;
                        point.isSuccess = true;

                        return point;
                    });
                    this.loadVisible = true
                    return
                }
            }
            this.$message.error('未查询到可预览文件资源');
        },
        handleFilePreview(uid) {
            console.log("🚀 ~ uid:", uid)
            const file = this.uploadingFiles.find(t => t.uid == uid);
            this.handlePreview(file);
        },
        downFile(fileId) {
            this.$downFile(`${this.apiUrl}system/annexesfile/${fileId}?token=${this.token}`);
        },
        handlePreview(file) {
            // if (file.isPreview == false && !this.isImg) {
            //   this.$message({
            //     type: "warning",
            //     message: "级别不够，无权限预览！"
            //   });
            //   return;
            // }
            this.isFile = true
            const fileExt = file.name.split(".")[file.name.split(".").length - 1];
            this.fileExt = fileExt;
            const fileId = file.id || file.response.fileId;
            switch (fileExt.toLowerCase()) {
                // case "xls":
                // case "xlsx":
                // case "ppt":
                // case "pptx":
                // case "txt":
                // case "csv":
                // case "html":
                // case "dxf":
                case "docx":
                case "doc":
                case "pdf":
                    this.isFile = true
                    if (this.$validatenull(this.apiUrl)) {
                        return;
                    }
                    this.previewUrl = `${this.apiUrl}system/annexesfile/preview/${fileId}?token=${this.token}`;
                    this.previewFileId = fileId;
                    this.previewVisible = true;
                    break;
                // case "gif":
                // case "bmp":
                // case "svg":
                case "png":
                case "jpeg":
                case "jpg":
                    this.isFile = false
                    if (this.isImg) {
                        if (file.url) {
                            this.previewUrl = file.url;
                        } else {
                            if (this.$validatenull(this.apiUrl)) {
                                return;
                            }
                            this.previewUrl = `${this.apiUrl}system/annexesfile/preview/${fileId}?token=${this.token}`;
                        }
                        this.previewVisible = true;
                    } else {
                        if (this.$validatenull(this.apiUrl)) {
                            return;
                        }
                        this.previewUrl = `${this.apiUrl}system/annexesfile/preview/${fileId}?token=${this.token}`;
                        this.previewFileId = fileId;
                        this.previewVisible = true;
                        break;
                    }

                    break;
                default:
                    // 不支持预览，就直接下载
                    // this.$message.warning(`当前文件格式不支持预览${fileExt}`);
                    // if (this.$validatenull(this.apiUrl)) {
                    //     return;
                    // }
                    // this.downFile(
                    //     `${this.apiUrl}system/annexesfile/${fileId}?token=${this.token}`
                    // );
                    break;
            }
        },
        turnTablePage({ rows }) {
            this.tablePageSize = rows;
            this.loadTableData(true);
        },
    },
    mounted() {
    }
}
</script>


<style scoped lang='scss'>
.file-list-dialog {
    position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, 0);
}

.desc {
    width: 90%;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    border: 1px solid #ffe9a2;
    margin: 0 auto;
    margin-top: 20px;
    padding-left: 20px;
    background-color: #fffbe6;
    display: flex;
    align-items: center;

    .icon {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }
}
</style>